const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
// 创建一个插件
// 处理打包后的bundle.js里面的 /******/ 注释 
class MyPlugin {
  apply(compiler) { // webpack在启用时会自动被调用的一个方法
    // compiler是webpack中最核心的一个对象
    // console.log(compiler, 'my plugin 启动了');
    compiler.hooks.emit.tap('myPlugin', (compilation) => {
      // compilation可以理解为此次打包的上下文
      for (const name in compilation.assets) {
        // console.log(name); 
        // name是输出的文件名称
        // 文件里面的内容可以通过 compilation.assets[name]的source方法来获取
        
        if (name.endsWith('.js')) {
          const contents = compilation.assets[name].source()
          const withoutComments = contents.replace(/\/*\*+\*\//g, '')
          compilation.assets[name] = {
            source: () => withoutComments,
            size: withoutComments.length // webpack中必须要有的一个方法
          }
        }

      }
    })
  }
}
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // publicPath: 'dist/'
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './public', // 指定额外的静态资源文件
    proxy: { 
      // 他是一个对象，其中每个属性都是一个代理规则的配置
      '/api': { 
        // 代理规则的配置
        // http://localhost:8800/api/users -> https://api.github.com/api/users
        target: 'https://api.github.com',
        pathRewrite: {
          '^/api': ''
        // http://localhost:8800/api/users -> https://api.github.com/users
        },
        // 修改主机名，true保持代理的主机名api.github.com，否则为localhost:8800
        changeOrigin: true
      }
    },
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.jpg|\.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10KB 
          }
        }
      },
      {
        test: /.html$/,
        include: [  // 指定需要进行处理的 html文件
          path.resolve(__dirname, 'src')
        ],
        use: {
          loader: 'html-loader',
          options: {
            attributes: {
              list: [
                '...', // All default supported tags and attributes
                {
                  tag: 'a',
                  attribute: 'href',
                  type: 'src',
                }
              ]
            }
          },
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // 清除打包后的所有文件后重新创建打包数据
    // new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热更新
    // 生成about.html
    new HtmlWebpackPlugin({
      filename: 'about.html'
    }),
    // 开发过程中最好不要使用这个插件
    // 放在构建生产中使用
    // new CopyWebpackPlugin({
    //   patterns: [
    //     'public'
    //   ]
    // }),

    new HtmlWebpackPlugin({   // 生成html文件
      title: 'webpack plugin sample',  // html的标题
      // meta: {
      //   viewport: 'width=device-width, initial-scale=1.0'
      // },
      template: './index.html', // 指定模板
      h1: 'hello world!',
    }),
    // new MyPlugin(),
  ]
}